<template>
    <div id="new-project-page">
        <div class="project-root">
            <div class="form-group">
                <label>项目名称</label>
                <teInput
                        id="project-name"
                        :placeholder="'请输入项目名称 (建议 <mod名> + 汉化)'"
                />
            </div>

            <div class="form-group">
                <label>项目介绍</label>
                <teTextArea :placeholder="'请以简要的语言描述这个项目吧'" />
            </div>

            <!--<teSplit/>-->
            <!--<p>项目语言</p>-->
            <div class="form-group">
                <label>项目语言</label>
                <selectLanguage />
            </div>
            <!--<teSplit/>-->
            <div class="form-group">
                <label>著作授权许可证</label>
                <selectLicense />
            </div>
            <!--<p>著作授权许可证</p>-->
            <!--<selectLicense/>-->
            <div class="form-group">
                <label>汉化mod类型</label>
                <selectGameType />
            </div>
        </div>

        <div class="fileGroup">
            <fileGroupView />
        </div>
    </div>
</template>

<script>
    import teInput        from '../../../components/TeUi/TeInput.vue';
    import teTextArea     from '../../../components/TeUi/TeTextArea.vue';
    import teSplit        from '../../../components/TeUi/TeSplit.vue';
    // import teSelect from "../component/TeSelect";
    // import teCheckGroup from "../component/TeCheckGroup";
    // import teCheckButton from "../component/TeCheckButton";
    import selectLanguage from './components/SelectLanguage.vue';
    import selectGameType from './components/SelectGameType.vue';
    import selectLicense  from './components/SelectLicense.vue';
    import fileGroupView  from './components/fileGroupView.vue';

    import projectManger from '../../../script/file/manager';

    export default {
        name: 'index',
        data() {
            return {
                project: {}
            };
        },
        components: {
            teInput,
            teTextArea,
            teSplit,
            selectLanguage,
            selectLicense,
            selectGameType,
            fileGroupView
        },
        methods: {
            selectFolder() {
                this.$root.electron.ipcSend('selectFolder', 'projectRoot');
                this.$root.electron.ipcOnce('projectRoot', (e, m) => {
                    if (m.filePaths.length == 1) {
                        this.projectRootPath = m.filePaths[0];
                        console.log(this.projectRootPath);
                    }
                    e;
                });
            }
        },
        mounted() {
            this.project = projectManger.buildProject();
        }
    };
</script>

<style scoped>
    #new-project-page {
        width: 100%;
        /*height: 100%;*/
        display: flex;
        /*flex-direction: row;*/
    }

    .project-root {
        padding-right: 24px;
        width: 40%;
    }

    .fileGroup {
        width: 60%;
    }

    .form-group {
        position: relative;
    }

    .form-group label {
        display: block;
        color: #fff;
        background: #0065b8;
        padding: 6px 8px;
    }

    .te-input,
    .te-text-area,
    .select-language {
        background: #00acff;
    }
</style>
